import React, { Component } from 'react';

import {
  StyleSheet, Dimensions, TouchableOpacity, Image, ActivityIndicator, View,
} from 'react-native';
import Video from 'react-native-video';

const { width: _width } = Dimensions.get('window');

export default class VidioView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showImg: true,
      showLoading: true,
    };
  }

  onBuffer() {
    this.setState({
      showImg: true,
      showLoading: true,
    });
  }

  hidder() {
    this.setState({
      showImg: false,
      showLoading: false,
    });
  }

  render() {
    const { data, num, playMethod } = this.props;
    return (
      <TouchableOpacity
        onPress={() => playMethod(num, data)}
      >
        { this.state.showImg && (
          <Image
            style={styles.image}
            source={require('../../assets/images/quyangguanli.png')}
            fadeDuration={0}
          />)
        }
        { this.state.showLoading && (
          <View style={styles.loading}>
            <ActivityIndicator size="large" />
          </View>)
        }
        <Video
          // eslint-disable-next-line import/no-dynamic-require
          // source={require('./img/trailer.mp4')}
          source={{ uri: data.uri }}
          rate={1.0} // 0暂停，1是正常
          volume={1.0} // 0是静音，1是正常
          muted={false} // 是否完全静音
          paused={data.paused} // 是否暂停
          resizeMode="stretch" // 以纵横比填充整个屏幕
          repeat
          onLoad={() => {
            this.hidder();
            playMethod(num, data);
          }}
          onLoadStart={() => this.onBuffer()}
          onError={this.videoError}
          style={styles.backgroundVideo}
        />
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  backgroundVideo: {
    width: _width * 16 / 9,
    height: 200,
  },
  image: {
    position: 'absolute',
    width: _width * 16 / 9,
    height: 200,
    zIndex: 1,
  },
  loading: {
    position: 'absolute',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    width: _width * 16 / 9,
    height: 200,
    zIndex: 1,
  },
});
